<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
  <div id="app">
    商品名
    <input type="text" v-model="item.name">
    商品价格：
    <input type="number" v-model="item.price">
    数量
    <input type="number" v-model="item.num">
    <button @click="addItem">增加</button>
    <table class="table table-bordered" style="width:600px;margin: 20px auto;">
      <thead>
        <tr>
          <th>商品名</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="items.length === 0">
          <td colspan="5" align="center">
            暂无商品
          </td>
        </tr>
        <tr v-for="(item, index) in items">
          <td>
            <input type="checkbox" @change="itemSelectedChange" v-model="item.selected">
            {{item.name}}
          </td>
          <td>
            ￥ {{item.price}}
          </td>
          <td>
            <button class="btn btn-xs" @click="changeItemNum(index, 'add')">+</button>
            <span>{{item.num}}</span>
            <button class="btn btn-xs" @click="changeItemNum(index, 'reduce')">-</button>
          </td>
          <td>
            ￥ {{ (item.num*item.price).toFixed(2) }}
          </td>
          <td>
            <button class="btn btn-danger btn-xs" @click="delItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="4">
            全选: <input type="checkbox" @change="allSelectedChange" v-model="allSelected">
            总价格: ￥{{total}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item:{
          name: '',
          price: 0,
          num: 1
        },
        items: [
          {
            name: '商品1',
            price: 18.8,
            num: 1,
            selected: true
          },
          {
            name: '商品2',
            price: 19.23,
            num: 1,
            selected: true
          },
          {
            name: '商品3',
            price: 188.8,
            num: 1,
            selected: true
          },
          {
            name: '商品4',
            price: 28.8,
            num: 1,
            selected: true
          }
        ],
        total: 0,
        allSelected: true
      },
      methods: {
        addItem(){
          this.items.push({
            ...this.item,
            selected: true
          })
        },
        allSelectedChange(){
          // 点击改变商品全选按钮
          this.items.forEach(item => {
            item.selected = this.allSelected;
          })
          this.calcTotal();
        },
        itemSelectedChange(){
          // 商品选中状态发生改变
          this.calcAllSelected()
            this.calcTotal();
        },
        delItem(index){
          // 删除商品
          if(confirm('确认删除吗?')){
            this.items.splice(index, 1);
            this.calcAllSelected()
            this.calcTotal();
          }
        },
        changeItemNum(index, action){
          // action  add增加 reduce减少
          // 增加或减少商品购买数量
          if (action === 'add') {
            // 增加
            this.items[index].num++
          }else{
            // 减少
            this.items[index].num--
            if (this.items[index].num <= 1){
              this.items[index].num = 1
            }
          }
          // 数量修改 重新计算总价格
          this.calcTotal();
        },
        calcTotal(){
          // 计算总价格
          /* 
            所有选中的商品的 单价*数量总合
            1 去除未选中商品 filter
            2 循环 计算 单价*数量总合
          */
          const selectedItems = this.items.filter(item => item.selected);
          // 计算之前总价格清零
          this.total = 0;
          selectedItems.forEach(item => {
            // 计算总合
            this.total += item.num * item.price;
          })
          // 保留两位小数点
          this.total = parseFloat(this.total.toFixed(2));
        },
        calcAllSelected(){
          // every
          this.allSelected = this.items.every(item => item.selected);
        }
      }
    })
    // 初始化调用
    vm.calcTotal();
    vm.calcAllSelected();
  </script>
</body>
</html>